<!-- 库存列表 -->
<template>
	<view>
		<!-- :style="{'zIndex':tabIndex==0?2:0}"  -->
		<hx-navbar ref="hxnb" :config="config" @clickBtn="clickBtn"></hx-navbar>
		<view class="list-view">
				<u-scroll-list :indicator="false" class="p-b-0">
					<view class="top-view p-t-20">
						<view class="flex flex-sa f-35 m-b-10">
							<view class="f-35">
								<view class="flex flex-c f-32 text-color"> 总匹数 </view>
								<view class="flex flex-c f-30 m-b-10"> {{totalObj.currentPiecesCount||0}} </view>
							</view>
							<view class="f-35">
								<view class="flex flex-c f-32 text-color"> 总数量 </view>
								<view class="flex flex-c f-30 m-b-10"> {{totalObj.waitQuantityOut||0}} </view>
							</view>
						</view>
					</view>
				</u-scroll-list>
			<u-sticky offset-top="0">
				<view class="flex flex-sa nav-view">
					<view class="flex flex-c f-28" style="flex: 1;">
						<view class="flex" v-if="params.data.storeName">
							<text class="m-r-10" style="color: #60b4f6;" @click="toWarehouse">{{params.data.storeName}}</text>
							<u-icon name="close" color="#60b4f6" size="10" @click="onDel('storeName')"></u-icon>
						</view>
						<view class="flex" v-else @click="toWarehouse">
							<text class="m-r-10" >全部库存</text>
							<u-icon name="arrow-down-fill" color="#bbb" size="10"></u-icon>
						</view>
					</view>
					<view class="flex flex-c f-28" style="flex: 1;">
						<view class="flex" v-if="params.data.name">
							<text class="m-r-10" style="color: #60b4f6;" @click="toProduct">{{params.data.code}} {{params.data.name}}</text>
							<u-icon name="arrow-down-fill" color="#60b4f6" size="10" @click="onDel('prod')"></u-icon>
						</view>
						<view v-else class="flex" @click="toProduct">
							<text class="m-r-10">产品</text>
							<u-icon name="arrow-down-fill" color="#bbb" size="10"></u-icon>
						</view>
					</view>
					<view class="flex flex-c f-28" style="flex: 1;">
						<view class="flex" v-if="params.data.colorNumber">
							<text class="m-r-10" style="color: #60b4f6;" @click="toColor">{{params.data.colorNumber}}</text>
							<u-icon name="close" color="#60b4f6" size="10" @click="onDel('color')"></u-icon>
						</view>
						<view class="flex" v-else>
							<text class="m-r-10" @click="toColor">颜色</text>
							<u-icon name="arrow-down-fill" color="#bbb" size="10"></u-icon>
						</view>
					</view>
				</view>
				<!-- 汇总库存 -->
				<view class="flex flex-sa nav-view" v-if="tabIndex==0">
					<view class="flex flex-c f-28" style="flex: 1;">
						<input class="inp-view" type="text" placeholder="缸号" placeholder-style="color: #999;">
					</view>
					<view class="flex flex-c f-28" style="flex: 1;">
						<input class="inp-view" type="text" placeholder="批号" placeholder-style="color: #999;">
					</view>
					<view class="flex flex-c f-28" style="flex: 1;">
						<template v-if="params.data.spec">
							<text class="m-r-10" style="color: #60b4f6;" @click="toSpec">{{params.data.spec}}</text>
							<u-icon name="close" color="#60b4f6" size="10" @click="params.data.spec=''"></u-icon>
						</template>
						<template v-else>
							<view class="flex" @click="toSpec">
								<text class="m-r-10">规格</text>
								<u-icon name="arrow-down-fill" color="#bbb" size="10"></u-icon>
							</view>
						</template>
					</view>
				</view>
				<!-- 在途库存 -->
				<view class="flex flex-sa nav-view" v-if="tabIndex==1">
					<view class="flex flex-c f-28" style="flex: 1;">
						<template v-if="params.data.spec">
							<text class="m-r-10" style="color: #60b4f6;" @click="toSpec">{{params.data.spec}}</text>
							<u-icon name="close" color="#60b4f6" size="10" @click="params.data.spec=''"></u-icon>
						</template>
						<template v-else>
							<view class="flex" @click="toSpec">
								<text class="m-r-10">规格</text>
								<u-icon name="arrow-down-fill" color="#bbb" size="10"></u-icon>
							</view>
						</template>
					</view>
					<view class="flex flex-c f-28" style="flex: 1;" @click="onNumEvent">
						<text class="m-r-10" style="color: #60b4f6;">{{numActive==0?'数量':'匹数'}}</text>
						<u-icon name="arrow-down-fill" color="#60b4f6" size="10"></u-icon>
						<!-- <template v-if="false">
							
						</template>
						<template v-else>
							<text class="m-r-10" @click="onNumEvent">数量</text>
							<u-icon name="arrow-down-fill" color="#bbb" size="10"></u-icon>
						</template> -->
					</view>
					<view class="flex flex-c f-28" style="flex: 1;">
						<template v-if="accumulationActive>0">
							<text class="m-r-10" style="color: #60b4f6;" @click="onSortEvent">{{sortName}}</text>
							<u-icon name="close" color="#60b4f6" size="10" @click="accumulationActive=0"></u-icon>
						</template>
						<template v-else>
							<view class="flex" @click="onSortEvent">
								<text class="m-r-10">排序</text>
								<u-icon name="arrow-down-fill" color="#bbb" size="10"></u-icon>
							</view>
						</template>
					</view>
				</view>
			</u-sticky>
			
			<view style="height: 100%;" v-if="tabIndex==0">
				  <mosoweTable class="table-view" :column="column" :localData="requestMethod" dataListKey="content" dataTotalKey="totalCount"
					  @onSortChange="onSortChange"
					  @onGetTdItemChange="toNextPage"
					  :pagination = 'false'
				  >
				  <!-- slot="nameDefault"  插槽是根据column 下每个对象下的value值 + 固定值(Default) 进行覆盖渲染-->
					  <template slot="widthValueDefault" slot-scope="colnum">
						<view class="a-i-c">
							<text>{{ colnum.rowData.widthValue||0 }}</text>/
							<text>{{ colnum.rowData.gramWeightValue|| 0}}</text>
						</view>
					  </template>
					  <template slot="currentPiecesCountDefault" slot-scope="colnum">
						<view class="a-i-c">
							<view><text class="blue p-r-10">{{ colnum.rowData.currentQuantity||0 }}</text><text class="grey">米</text></view>
							
							<view>{{ colnum.rowData.currentPiecesCount|| 0}}</view>
						</view>
					  </template>
				  </mosoweTable>
			</view>
			<view class="table-box" v-if="tabIndex==1">
				<view class="table-con">
					<view class="name p-l-10">
						白柸#
					</view>
					<view class="kc-view">
						<text class="p-l-10 grey">库存</text>
						<text class="p-l-10 p-r-10">1匹</text>
						<text>10米</text>
					</view>
					<view class="list flex">
						<view class="item-view">
							<text class="grey p-r-10">客/未发</text>
							<text>0</text>
						</view>
						<view class="item-view">
							<text class="grey p-r-10">待出库</text>
							<text>0</text>
						</view>
						<view class="item-view">
							<text class="grey p-r-10">可发货</text>
							<text>1</text>
						</view>
						<view class="item-view">
							<text class="grey p-r-10">采/未来</text>
							<text>0</text>
						</view>
						<view class="item-view">
							<text class="grey p-r-10">织/未来</text>
							<text>0</text>
						</view>
						<view class="item-view">
							<text class="grey p-r-10">加/未来</text>
							<text>0</text>
						</view>
						<view class="item-view">
							<text class="grey p-r-10">加/占用</text>
							<text>0</text>
						</view>
						<view class="item-view">
							<text class="grey p-r-10">可加工</text>
							<text>1</text>
						</view>
						<view class="item-view">
							<text class="grey p-r-10">可用匹</text>
							<text>1</text>
						</view>
					</view>
				</view>
				<view class="table-con">
					<view class="name p-l-10">
						白柸#
					</view>
					<view class="kc-view">
						<text class="p-l-10 grey">库存</text>
						<text class="p-l-10 p-r-10">1匹</text>
						<text>10米</text>
					</view>
					<view class="list flex">
						<view class="item-view">
							<text class="grey p-r-10">客/未发</text>
							<text>0</text>
						</view>
						<view class="item-view">
							<text class="grey p-r-10">待出库</text>
							<text>0</text>
						</view>
						<view class="item-view">
							<text class="grey p-r-10">可发货</text>
							<text>1</text>
						</view>
						<view class="item-view">
							<text class="grey p-r-10">采/未来</text>
							<text>0</text>
						</view>
						<view class="item-view">
							<text class="grey p-r-10">织/未来</text>
							<text>0</text>
						</view>
						<view class="item-view">
							<text class="grey p-r-10">加/未来</text>
							<text>0</text>
						</view>
						<view class="item-view">
							<text class="grey p-r-10">加/占用</text>
							<text>0</text>
						</view>
						<view class="item-view">
							<text class="grey p-r-10">可加工</text>
							<text>1</text>
						</view>
						<view class="item-view">
							<text class="grey p-r-10">可用匹</text>
							<text>1</text>
						</view>
					</view>
				</view>
				<view class="table-con">
					<view class="name p-l-10">
						白柸#
					</view>
					<view class="kc-view">
						<text class="p-l-10 grey">库存</text>
						<text class="p-l-10 p-r-10">1匹</text>
						<text>10米</text>
					</view>
					<view class="list flex">
						<view class="item-view">
							<text class="grey p-r-10">客/未发</text>
							<text>0</text>
						</view>
						<view class="item-view">
							<text class="grey p-r-10">待出库</text>
							<text>0</text>
						</view>
						<view class="item-view">
							<text class="grey p-r-10">可发货</text>
							<text>1</text>
						</view>
						<view class="item-view">
							<text class="grey p-r-10">采/未来</text>
							<text>0</text>
						</view>
						<view class="item-view">
							<text class="grey p-r-10">织/未来</text>
							<text>0</text>
						</view>
						<view class="item-view">
							<text class="grey p-r-10">加/未来</text>
							<text>0</text>
						</view>
						<view class="item-view">
							<text class="grey p-r-10">加/占用</text>
							<text>0</text>
						</view>
						<view class="item-view">
							<text class="grey p-r-10">可加工</text>
							<text>1</text>
						</view>
						<view class="item-view">
							<text class="grey p-r-10">可用匹</text>
							<text>1</text>
						</view>
					</view>
				</view>
			</view>
			
			
		</view>
		<!-- 底部tab -->
		<u-tabbar
			:value="tabIndex"
			@change="name => tabIndex = name"
			:fixed="true"
			:placeholder="true"
			:safeAreaInsetBottom="true"
		>
			<u-tabbar-item text="汇总库存" icon="photo" ></u-tabbar-item>
			<u-tabbar-item text="在途库存" icon="home" ></u-tabbar-item>
		</u-tabbar>
		<!-- 筛选弹框 侧边栏 -->
		<u-popup class="sidebar" :show="show" mode="right" overlayOpacity="0.3" @close="close">
		    <view class="pop-view">
				<view class="">
					<view class="cl-cell flex flex-sb">
						<view class="flex" style="flex: 1;" @click="toWarehouse">
							<view class="title">
								仓库
							</view>
							<view class="value">
								{{sideObj.storeName}}
							</view>
						</view>
						<view class="icon">
							<u-icon name="close" color="#999" size="20" v-if="sideObj.storeName" @click="sideObj.storeName=''"></u-icon>
							<u-icon name="arrow-right" color="#999" v-else></u-icon>
						</view>
					</view>
					<view class="cl-cell flex flex-sb">
						<view class="flex" style="flex: 1;" @click="toProduct">
							<view class="title">
								产品
							</view>
							<view class="value">
								{{sideObj.code}} {{sideObj.name}}
							</view>
						</view>
						<view class="icon">
							<u-icon name="close" color="#999" size="20" v-if="sideObj.name" @click="sideObj.name=''"></u-icon>
							<u-icon name="arrow-right" color="#999" v-else></u-icon>
						</view>
					</view>
					<view class="cl-cell flex flex-sb">
						<view class="flex" style="flex: 1;" @click="toColor">
							<view class="title">
								色号
							</view>
							<view class="value">
								{{sideObj.colorNumber}}
							</view>
						</view>
						<view class="icon">
							<u-icon name="close" color="#999" size="20" v-if="sideObj.colorNumber" @click="sideObj.colorNumber=''"></u-icon>
							<u-icon name="arrow-right" color="#999" v-else></u-icon>
						</view>
					</view>
				</view>
		        <view class="fot-btn flex flex-sw p-l-10 p-r-10">
		        	<u-button text="重置" shape="circle" class="reset m-r-10" @click="onReset"></u-button>
					<u-button text="搜索" shape="circle" color="linear-gradient(to right, rgb(64, 158, 255), rgb(64, 158, 255), rgb(96, 180, 246), rgb(96, 180, 246))"  @click="onSearch"></u-button>
		        </view>
		    </view>
		</u-popup>
		<!-- 筛选框 数量 -->
		<u-popup :show="numShow" mode="bottom" overlayOpacity="0.3" @close="numClose">
		  <view class="popup-bottom-view">
		    <u-cell v-for="(item, index) in numList" :key="index" :title="item.name" @click="targetNum(item, index)">
		      <u-icon v-if="numActive === index" slot="right-icon" size="20" color="#409EFF" name="checkmark"></u-icon>
		    </u-cell>
		  </view>
		</u-popup>
		
		<!-- 筛选框 排序 -->
		<u-popup :show="accumulationShow" mode="bottom" overlayOpacity="0.3" @close="accumulationShowClose">
		  <view class="popup-bottom-view">
		    <u-cell v-for="(item, index) in accumulationList" :key="index" :title="item.name" @click="targetAccumulation(item, index)">
		      <u-icon v-if="accumulationActive === index" slot="right-icon" size="20" color="#409EFF" name="checkmark"></u-icon>
		    </u-cell>
		  </view>
		</u-popup>
	</view>
</template>

<script>
	import {listPage, listPageFooting} from '@/apis/inventory/inventory.js'
	import mosoweTable from '@/components/mosowe-table/mosowe-table.vue'
	export default {
		name: '',
		components: {
			mosoweTable,
		},
		data() {
			return {
				// 排序
				accumulationShow: false,
				accumulationList: [
				  {name: '默认'},
				  {name: '数量升序'},
				  {name: '数量降序'},
				  {name: '匹数升序'},
				  {name: '匹数降序'}
				],
				accumulationActive: 0,
				sortName: '',
				// 数量
				numShow: false,
				numList: [
				  {name: '数量'},
				  {name: '匹数'}
				],
				numActive: 0,
				
				
				
				tabIndex: 0,
				config: {
				  title: "布匹-库存数",
				  color: "#ffffff",
				  //背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
				  backgroundColor: [1, ["#409EFF", "#409EFF", "#60b4f6", "#60b4f6"]],
				  rightButton: [
				    {
				      key: "btn1",
				      icon: "&#xe888;",
				      position: "left",
				    },
				  ],
				},
				show: false,
				params: {
					data: {
						storeName: '',
						storeId: '', //仓库id
						name: ''
					},
					page: {
						current: 1,
						size: 999
					}
				},
				totalObj: {},
				// 表格
				requestMethod:[],
				column: [{
						text: '名',
						value: 'index',
						fixed: 'left',
						width: 40
					},{
						text: '颜色',
						value: 'colorNumber',
						sortable: true,
						align: 'center',
						fixed: 'left'
					},
					{
						text: '数量',
						value: 'canDeliverUseQuantity',
						sortable: true,
						align: 'center'
					},
					{
						text: '仓库',
						value: 'storeName',
						align: 'center'
					},
					{
						text: '幅/克',
						value: 'widthValue',
						align: 'center'
					},
					{
						text: '可发货',
						value: 'currentPiecesCount',
						sortable: true,
						align: 'center'
					},
					// {
					// 	text: '成本价',
					// 	value: 'canDeliverUsePiecesCount',
					// 	align: 'center'
					// }
				],
				// 侧边栏
				sideObj: {
					storeName: '',
					name: '',
					colorNumber: ''
				}
			}
		},
		onLoad(opt) {
			console.error(this.$Route.query.data)
			console.log(opt)
			let {name, spuId, storeId, storeName} = this.$Route.query.data;
			this.params.data = this.$Route.query.data;
			// this.params.data.storeName = storeName
			// this.params.data.name = name
			// this.params.data.storeId = storeId
			// this.params.data.code = code
			listPageFooting({
				storeId, storeName
			}).then(res=>{
				if(!res.flag) return;
				this.totalObj = res.data;
			})
		},
		onShow() { 
			// 库存
			uni.$on('data',(res)=>{
				let {name, id} = res;
				if(this.show) {
					this.sideObj.storeName = name;
					this.sideObj.storeId = id;
				} else {
					this.params.data.storeName = name;
					this.params.data.storeId = id;
					this.params.page.current = 1;
					this.getListPage()
				}
				uni.$off('data')
			})
			
			// 产品
			uni.$on('productData',(res)=>{
				let {name, code, id} = res;
				if(this.show) {
					this.sideObj.name = name;
					this.sideObj.code = code;
					this.sideObj.spuId = id;
				} else {
					this.params.data.name = name;
					this.params.data.code = code;
					this.params.data.spuId = id;
					this.params.page.current = 1;
					this.getListPage()
				}
				uni.$off('productData')
			})
			
			// 颜色
			uni.$on('on-color-data',(res)=>{
				let {colorNumber, id} = res;
				if(this.show) {
					this.sideObj.colorNumber = colorNumber;
					this.sideObj.colorId = id
				} else {
					this.params.data.colorNumber = colorNumber;
					this.params.data.colorId = id
					this.params.page.current = 1;
					this.getListPage()
				}
				uni.$off('on-color-data')
			})
			// 规格
			uni.$on('specData',(res)=>{
				console.error(res)
				this.params.data.spec = res.label;
				this.params.page.current = 1;
				this.getListPage()
				uni.$off('specData')
			})
		},
		
		methods: {
			// 搜索
			onSearch() {
				this.params.data = this.sideObj;
				this.close()
			},
			// 重置
			onReset() {
				this.sideObj = {
					storeName: '',
					name: '',
					colorNumber: ''
				}
			},
			// 删除图标
			onDel(type) {
				if(type=='storeName') {
					this.params.data.storeName = '';
					this.params.data.storeId = '';
				}
				if(type=='prod') {
					this.params.data.name = '';
					this.params.data.code = '';
					this.params.data.spuId = '';
				}
				if(type == 'color') {
					this.params.data.colorNumber = '';
					this.params.data.colorId = ''
				}
				if(type == 'spec') {
					this.params.data.spec = '';
				}
				this.params.page.current = 1;
				this.getListPage()
			},
			
			// 跳转产品
			toProduct() {
				uni.navigateTo({
					url: '/pages/application/pages/cloth/inventory/matching/product/index'
				})
			},
			onNumEvent() {
				this.numShow = true
			},
			targetNum(item,index) {
				this.numShow = false
				this.numActive = index;
			},
			numClose() {
				this.numShow = false
			},
			onSortEvent() {
				this.accumulationShow = true
			},
			// 排序选中
			targetAccumulation(item, index) {
			  this.accumulationActive = index
			  this.accumulationShow = false
			  this.sortName = item.name;
			},
			accumulationShowClose() {
			  this.accumulationShow = false
			},
			onSortChange(obj) {
				console.error(obj)
			},
			// 跳转库存明细
			toNextPage(val) {
				// let {storeId, storeName, name, spuId, code, gramWeightValue} = this.requestMethod[val.index]
				
				// this.$Router.push({
				// 	path: '/pages/application/pages/cloth/matching-inventory/inventory-quantity/details',
				// 	query: {storeId, storeName, name, spuId, code, gramWeightValue}
				// })
				
				let data = encodeURIComponent(JSON.stringify(this.requestMethod[val.index]))
				
				
				uni.navigateTo({
					url:`/pages/application/pages/cloth/inventory/matching/quantity/details?data=${data}`
				})
			},
			getListPage() {
				uni.showLoading({	
					title: '加载中'
				})
				listPage(this.params).then(res=>{
					uni.hideLoading()
					if(!res.flag) return;
					this.requestMethod = res.data.records;
					this.requestMethod.map((item,index)=>{
						item.index = index+1
						return item
					})
				}).catch(()=>{
					uni.hideLoading()
				})
			},
			clickBtn(item) {
				if (item.key === "btn1") {
					this.show = true
				}
			},
			close() {
			  this.show = false
			  this.getListPage()
			},
			// 去选择仓库
			toWarehouse() {
				this.$Router.push({
				  path: "/pages/application/pages/information/warehouse/warehouse",
				  query: {
				    type: 'list'
				  }
				});
			},
			// 去选择颜色
			toColor() {
				this.$Router.push({
				  path: "/pages/application/pages/cloth/color/index",
				  query: {
				    type: 'list',
					spuid: '1648574356646920192'
				  }
				});
			},
			// 去选择规格
			toSpec() {
				this.$Router.push({
				  path: "/pages/application/pages/cloth/specifications/index",
				  query: {
				    type: 'list',
					title: '001 布匹001',
					spuid: '1648574356646920192'
				  }
				});
			}
		},
		mounted() {
			console.error(this.$Router)
			this.getListPage()
		}
	}
</script>

<style lang="scss" scoped>
	.list-view {
		position: relative;
		z-index: 0;
	}
	.ellipsis {
		width: 144rpx;
		height: 80rpx;
		line-height: 80rpx;
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
	}
	.top-view {
		flex: 1;
		background: linear-gradient(to right, rgb(64, 158, 255), rgb(64, 158, 255), rgb(96, 180, 246), rgb(96, 180, 246));
		color: #fff;
	}
	.nav-view {
		background-color: #fff;
		height: 80rpx;
		color: #999;
		.inp-view {
			flex: 1;
			text-align: center;
			color: #333;
		}
	}
	.dl-view {
		.dt-view {
			font-weight: bold;
			color: #333;
			margin: 0 40rpx 10rpx;
		}
		.dd-view {
			margin: 0 40rpx 40rpx;
			background-color: #fff;
			border-radius: 10rpx;
			padding: 20rpx;
			align-items: center;
			.ul-view {
				flex-wrap: wrap;
				.li-view {
					// flex: 1;
					margin-bottom: 16rpx;
					width: 50%;
				}
			}
			.name {
				margin-bottom: 16rpx;
			}
		}
		
	}
	.green {
		color: #53c21d;
	}
	.blue {
		color: #409EFF;
	}
	.grey {
		color: #999;
	}
	.pop-view {
		width: 500rpx;
		padding-top: 88rpx;
		.cl-cell {
			height: 80rpx;
			border-bottom: 1rpx solid #efefef;
			padding: 0 20rpx 0 40rpx;
			.title {
				color: #999;
			}
			.value {
				flex: 1;
				overflow: hidden;
				height: 40rpx;
				color: #999;
				padding-left: 20rpx;
			}
		}
		.fot-btn {
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			padding-bottom: 20rpx;
		}
		.reset {
			color: #409eff;
			background-color: #e3edff;
		}
	}
	.table-box {
		padding: 20rpx;
		.table-con {
			background-color: #fff;
			border-radius: 10rpx;
			box-shadow: 4rpx 6rpx 16rpx #c7c7c7;
			padding: 20rpx;
			margin-bottom: 20rpx;
			.name {
				font-weight: bold;
				color: #333;
				padding: 10rpx 0 20rpx;
			}
			.kc-view {
				padding-bottom: 20rpx;
			}
			.list {
				background-color: #eee;
				padding: 0 10rpx;
				flex-wrap: wrap;
				.item-view {
					width: 33.33%;
					line-height: 80rpx;
				}
			}
		}
	}
</style>